<template>
  <div>
    <GoodsTop @search='searchFn'>
    </GoodsTop>

    <!-- 列表区域 -->
    <div class="list">
      <el-button
        type="warning"
        @click="addFn"
      ><i class="el-icon-circle-plus-outline"></i>新建</el-button>
      <el-table
        :data="classList"
        style="width: 100%"
        size='medium'
      >
        <el-table-column
          type="index"
          :index='indexAdd'
          label="序号"
          width="100"
        >
          <!--  type="index" :index="indexMethod" element表单中的方法 -->

        </el-table-column>
        <el-table-column
          prop="className"
          label="商品类型名称"
        >
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template v-slot='{row}'>
            <el-link
              type="primary"
              @click="putFn(row)"
            >修改</el-link>
            <el-link
              type="danger"
              @click="delFn(row.classId)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          layout="slot,next,prev"
          prev-text='上一页'
          next-text='下一页'
          :total="totalCount "
        >
          <template>
            <span class="num-txt">
              共{{totalCount}}条记录
              第{{currentPage1}}/{{totalPage}}页
            </span>
          </template>
          <!--  @current-change 当前页变动时触发的事件 -->
        </el-pagination>
      </div>

      <!--新增对话框 -->
    </div>
    <el-dialog
      :title="flag ? '新增商品类型' :'修改商品类型'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref='addForm'
      >
        <el-form-item
          label="商品类型名称:"
          :label-width="formLabelWidth"
          prop="className"
        >
          <el-input
            type="text"
            placeholder="请输入"
            v-model="form.className"
            maxlength="10"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogFormVisible = false"
          type="warning"
          plain
        >取 消</el-button>
        <el-button
          type="warning"
          @click="submit"
        >确 认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import GoodsTop from '@/components/goodstop.vue'


  import { addGoodsClass, GoodsSearch, delGoodsClass, putGoodsClass } from '@/api/goods'
  export default {
    components: {
      GoodsTop,

    },
    async created () {
      //商品类型
      this.handleCurrentChange()//当前页变动时触发
    },
    methods: {
      async handleCurrentChange (val = 1) {
        const res1 = await GoodsSearch({ pageIndex: val, pageSize: this.pageSize })
        console.log(res1);
        this.classList = res1.data.currentPageRecords
        this.totalPage = res1.data.totalPage
        console.log(this.totalPage);
        this.currentPage1 = val
        this.totalCount = Number(res1.data.totalCount)//转化成数字
        console.log(`当前页: ${val}`);
      },
      //序号
      indexAdd (index) {
        return this.pageSize * (this.currentPage1 - 1) + index + 1
      },
      //查询
      async searchFn (input) {
        const res = await GoodsSearch({ pageIndex: 1, pageSize: 10000 })
        console.log(res);
        input ? this.classList = res.data.currentPageRecords.filter(item => item.className === input) : this.handleCurrentChange()
      },
      //新增确认
      async submit () {
        //  await this.$refs.form.validate()
        if (this.flag === true) {
          await addGoodsClass({ className: this.form.className })
         
        } else {
           await putGoodsClass(this.form)
          
        }
        this.handleCurrentChange()
        this.$refs.addForm.resetFields()//重置表单和校验
        this.dialogFormVisible = false

      },
      //新建
      addFn () {
        this.dialogFormVisible = true
        this.flag = true
      },
      //修改
      putFn (row) {

        this.dialogFormVisible = true
        this.flag = false
        this.form = { ...row }//当前行的信息给到form
        //回显
        this.form.className = row.className

      },
      //删除
      async delFn (classId) {
        await delGoodsClass(this.classList.find(item=>item.classId===classId))//find返回对象
         this.handleCurrentChange()
        //  const ress= this.classList.find(item=>item.classId===classId)

        this.$message.success('删除成功')
      }
    },
    data () {
      return {
        currentPage1: 1,//当前页
        pageSize: 10,
        totalPage: 0,
        totalCount: 0,//期待是一个数字
        flag: false,

        classList: [
          {//商品类型
            className: '',
          }],
        dialogVisible: false,
        /* 新增 */
        form: {
          className: '',
          // classId:''
        },
        rules: {
          className: [
            { required: true, message: '请输入', trigger: 'blur' },
            //校验是否重复
            {
              validator: (rule, value, callback) => {
                const isRepeat = this.classList.some(item => item.className === value)
                isRepeat ? callback(new Error('已存在此名称的对象')) : callback()
              }, trigger: 'blur'
            }
          ]
        },
        text: '',
        dialogFormVisible: false,
        formLabelWidth: '120px'
      }
    }
  }

</script>

<style lang='less' scoped>
  .num-txt {
    font-size: 16px !important;
    color: #dbdfe5 !important;
    font-weight: 400;
  }
  ::v-deep .el-pagination .btn-prev,
  ::v-deep .el-pagination .btn-next {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    color: #606266;
    float: right;
  }
  ::v-deep .el-pagination .btn-prev {
    float: right;
  }
  ::v-deep .el-dialog__footer {
    text-align: center;
  }
  .el-form-item__label {
    margin-right: 25px;
    font-size: 15px;
  }
  .el-input {
    width: 400px;
    height: 38px;
  }

  .page {
    width: 1100px;
    // display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 40px 16px;
    margin-left: 20px;
    margin-right: 40px;
  }
  // ::v-deep.el-table__header-wrapper{
  //   background-color: #f3f6fb;
  // }
  .el-button.el-button--warning {
    margin-bottom: 10px;
  }
  .list {
    position: relative;
    height: 650px;
    background-color: #fff;
    padding: 25px;
  }

  /* .el-button.el-button--warning{
          margin-left: 10px;
          margin-top: 20px;

        } */
  .search-box.el-button.el-button--primary,
  .list.el-button.el-button--warning {
    width: 85px;
    height: 30px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    padding: 0;
    /* background-color: #5f84ff; */
    border: none;
    text-align: center;
  }
  .el-icon-circle-plus-outline {
    margin-right: 10px;
    font-size: 19px;
    margin-top: 1px;
  }
  .el-link.el-link--primary {
    margin-right: 10px;
  }
</style>